<template>
    <div class="base-menu">
        <div class="menu-item"  v-for="(menu, index) in menuList" :class="{active: menu.actived}" @click="menuClick(index)">
            <div class="box">
                <Icon :icon="menu.icon.name" :size="menu.icon.size" :fill="menu.actived ? menu.icon.activeColor:  menu.icon.fill" :theme="menu.icon.theme"></Icon>
                <span class="label" :style="{color: menu.actived?'#fff':'#9C9FA7'}">{{ menu.label }}</span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { HomeTwo, VideoOne, People } from '@icon-park/vue-next'
import Icon from '@/components/Icon/icon.vue'
import { useVideoStore } from '@/store/video';
import { useBroadStore } from '@/store/broad';
import {useRouter} from 'vue-router'
import {reactive, onMounted} from 'vue';

const videoStore = useVideoStore()
const broadStore = useBroadStore()
// interface menuList {
    // <people theme="filled" size="20" fill="#fff"/>
// }
interface menu{
    icon: Icon,
    label: string,
    actived: boolean,
    link?: string,
}
interface Icon {
    name?: any,
    size?: string | number,
    theme?: string,
    fill?: string |string[],
    activeColor?: string |string[],

}

// console.log()

const emit = defineEmits(['menuClcik']);
const router = useRouter();
const { path } = router.currentRoute.value;

onMounted(() => {
    setOuter(path);
})

// <video-one theme="filled" size="20" fill="#fff"/>
const menuList = reactive<menu[]>([
    {
        icon: {
            name: HomeTwo, 
            size: 16, 
            theme: 'multi-color', 
            fill: ['#9C9FA7' ,'#9C9FA7' ,'#9C9FA7' ,'#9C9FA7'], 
            activeColor: ['#fff' ,'#fff' ,'#fff' ,'#fff']
        },
        label: '首页',
        actived: true,
        link: '/home/main'
    },
    {
        icon: {
            name: People, 
            size: 16, 
            theme: 'filled', 
            fill: '#9C9FA7',
            activeColor: '#fff'
        },
        label: '数字人视频',
        actived: false,
        link: '/home/video'
    },
    {
        icon: {
            name: VideoOne, 
            size: 16, 
            theme: 'multi-color', 
            fill: ['#9C9FA7','#9C9FA7','#9C9FA7','#9C9FA7'],
            activeColor:  ['#fff','#fff','#fff','#fff']
        },
        label: '数字人直播',
        actived: false,
        link: '/home/broad'
    }
])
menuList.forEach(val => val.actived = path.includes(val?.link || ''))
const menuClick = (index: number): void => {
    menuList.forEach((val, i) => {
        if(index !== i) {
            val.actived = false;
            return;
        }
        val.actived = true;
    })
    setOuter(menuList[index].link)
    emit('menuClcik', menuList[index].link)
}
const setOuter = (path: string | any) => {
    broadStore.setIsList(path !== '/home/broad/edit');
    videoStore.setIsList(path !== '/home/video/edit');
}
</script>
<style scoped lang="css">
.base-menu {
    height: 100%;
}
.menu-item {
    color: #fff;
    width: 128px;
    height: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    margin-bottom: 14px;
    cursor: pointer;
}
.box {
    width: 110px;
    display: flex;
    align-items: center;
    vertical-align: middle;
}
.menu-item:hover {
    background-color: #453C4F;
}
.active{
    background-color: #453C4F;
}
.menu-item .label {
    margin-left: 14px;
    font-size: 14px;
    /* margin-top: -4px; */
    margin-bottom: 2px;
}
</style>